<template>
	<view style="padding-bottom: 50px;">
		<cu-custom :bgColor="'bg-' + theme.themeColor" :isBack="true">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		
		<view class="banner-con" style="margin-top: 10px;padding: 0 10px;">
			<image class="image" :src="imgBg" mode=""></image>
			<text class="text-block">{{ goodList.name }}</text>
			<text class="text-block text-blocksize">产品描述 : {{ goodList.subTitle }}</text>
		</view>
		
		<view class="fxs-con">
			<view class="fxs-title">选择发型师</view>
			<view class="fxs-ul">
				<view :class="{ 'fxs-li': true, 'hover' : start === i }"  v-for="(item,i) in goodList.goodsSkus" @click="toRouter(i,item)">
						<image class="imgTx" :src="item.goodsSkuSpecsValues[0].picUrl" mode=""></image>
						<text class="textWz">{{item.goodsSkuSpecsValues[0].specsValueName}}</text>
						<view  :class="{ 'imgan': true, 'imghover' : start === i }" src="" mode=""></view>
				</view>
			</view>
		</view>
		
		<view class="fsx-time">
			<view class="fxs-title" style="margin-bottom: 15px;">到店时间</view>
			<uni-datetime-picker :start="Date.now()" v-model="subscribeTime" @change="change" style="margin-top: 10px;" />
		</view>
		
		<view class="footer-con">
			<view class="footer-cantainer">
				<view class="footer-let">
					<view class="qian">
						￥{{ price | tofixed }}
					</view>
					<view class="footer-text">
						<text>到店分配</text>
						<text>{{ subscribeTime }}</text>
					</view>
				</view>
				<view class="footer-right">
					 <uni-number-box :min="1" :max="10" :value="goods_count" :disabled="!goodlistData || !subscribeTime" @change="numChangeHandler"></uni-number-box>
				</view>
			</view>
			<view class="footer-btn" >
				<view class="flex-con" @tap="addShopp">
					加入购物车
				</view>
				<view class="flex-con flex-con2" @tap="buyNowbounce">
					立即预约
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import config from 'config/env'
	import debounce from 'lodash/debounce' 
	import { shoppingCartAdd } from '@/api/shoppingcart.js'
	import { getById } from '@/api/goodsspu.js'
	import store from '@/store';
	export default {
		data() {
			return {
				imgBg:`${config.imgSrcL}bannerBg.png`,
				subscribeTime:'',
				price:'',
				goodList : '', //商品详情列表
				Goodid : '', //商品id
				time:'',
				start : -1,
				isFlag : false,
				theme: getApp().globalData.theme, //主题
				showDefultPage: false, // 是否显示默认样式
				pageDesign: {
					pageName: '丽人服务'
				},
				goods_count : 1,
				goodlistData:'',
				freightTemplate: {}, //运费模版
			};
		},
		filters: {
		  // 把数字处理为带两位小数点的数字
		  tofixed(num) {
		    return Number(num).toFixed(2)
		  }
		},
		watch : {
			price(newValue,oldValue){
				 console.log('数据已更新：', newValue)
			},
			goods_count(newValue,oldValue){
				 console.log('数据已更新：', newValue)
			}
		},
		onLoad(optiosn) {
			this.Goodid = optiosn.id
			// console.log(this.Goodid)
			
			this.getGoodlist(optiosn.id)
			
		},
		methods : {
			change(e){
				this.subscribeTime = e
				// this.goodlistData.subscribeTime = e
				// console.log(this.subscribeTime)
			},
			async getGoodlist(id){
				const { data } = await getById(id)
				this.goodList = data
				
				this.freightTemplate = data.freightTemplate
				
				// this.price = data.goodsSkus[0].salesPrice
				// console.log(this.goodList)
				
				// this.goodlistData = {
				// 	"spuId" : this.goodList.goodsSkus[0].spuId,
				// 	"skuId" :  this.goodList.goodsSkus[0].id,
				// 	"spuName": this.goodList.name, //商品名称
				// 	"picUrl":  this.goodList.goodsSkus[0].goodsSkuSpecsValues[0].picUrl, //商品图
				// 	"salesPrice" : this.goodList.goodsSkus[0].goodsSkuSpecsValues[0].salesPrice,
				// 	"specsInfo": this.goodList.goodsSkus[0].goodsSkuSpecsValues[0].specsValueName, //规格信息
				// 	"subscribeTime": this.subscribeTime
				// }
			},
			numChangeHandler(val) {
				if(!this.goodlistData){
					uni.$showMsg('请选择发型师')
				}else if(!this.subscribeTime){
					uni.$showMsg('请选择时间')
				}else{
					this.$nextTick(() => {
						this.goods_count = val
					})
				}
				
				
			},
			async addshopping(){
				
				// console.log(goodsSpuSpecs[0].goodsSkuSpecsValues)
				
				// console.log(goodsSkus[0].spuId)
				
				// "quantity":this.goods_count, //加入数量
				// console.log(goodsSkus.spuId + '-----')
				let goodlistDatas = this.goodlistData
				
				goodlistDatas.quantity = this.goods_count
				goodlistDatas.subscribeTime = this.subscribeTime
				
				
				
				const { data } = await shoppingCartAdd(this.goodlistData)
				
				if( data === true){
					
					uni.showToast({
						title: '添加成功',
						icon: 'success',
						duration: 2000
					});
					
					// console.log(this.goodlistData)
					
				}
				
				uni.navigateTo({
					url:`/subpkg/beauty/beautyIndex/beautyIndex`
					// url:`/pages/goods/goods-detail/index?id=${id}`
				})
				
				
			},
			toRouter(i,item){
				this.start = i
				console.log(item)
				// console.log(this.start)
				this.price = item.salesPrice
				this.goodlistData = {
					"spuId": item.spuId, //spuId
					"skuId":item.id,
					"spuName": this.goodList.name, //商品名称
					"picUrl": item.goodsSkuSpecsValues[0].picUrl, //商品图
					"salesPrice": item.salesPrice, //销售价格（元）
					"specsInfo": item.goodsSkuSpecsValues[0].specsValueName, //规格信息
					"subscribeTime": this.subscribeTime,
					// "freightTemplate":item
				}
				
			},
			// 立即购买
			buyNow() {
				// let goodsList = [{
				// 	spuId: that.goodsInfo.id,
				// 	skuId: that.selectShop.id,
				// 	salesPrice: that.selectShop.salesPrice,
				// 	spuName: that.goodsInfo.name,
				// 	quantity: that.selectNum,
				// 	specsInfo: that.selectNameArr.join("；") != '默认' ? that.selectNameArr.join(
				// 		"；") : '',
				// 	picUrl: that.selectPic ? that.selectPic : that.goodsInfo
				// 		.spuUrls[0],
				// 	freightTemplate: that.goodsInfo.freightTemplate
				// }]
				
				let goodlistArray = []
				
				// console.log(this.freightTemplate)
				
				// console.log(this.goodList)
				
				this.goodlistData.quantity = this.goods_count
				
				this.goodlistData.subscribeTime = this.subscribeTime
				
				this.goodlistData.freightTemplate = this.freightTemplate
				
				goodlistArray.push(this.goodlistData)
				
				// let goodlistDatas = this.goodlistData
				
				// goodlistDatas.quantity = this.goods_count
				
				// goodlistDatas.subscribeTime = this.subscribeTime
				
				store.commit('SET_GOODS_LIST', goodlistArray)
				
				uni.navigateTo({
					// url: '/pages/order/order-confirm/index',
					url: `/subpkg/order/order-confirm/index?type=${'2'}`,
				});
			},
			
			
			
			
			buyNowbounce : debounce(function(){
				console.log('防抖')
				if(!this.goodlistData){
					uni.$showMsg('请选择发型师')
				}else if(!this.subscribeTime){
					uni.$showMsg('请选择时间')
				}else{
					console.log('立即购买')
					this.buyNow()
				}
			},600),
			
			addShopp : debounce(function(){
				console.log('防抖')
				if(!this.goodlistData){
					uni.$showMsg('请选择发型师')
				}else if(!this.subscribeTime){
					uni.$showMsg('请选择时间')
				}else{
					this.addshopping()
				}
			},600)
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}

.footer-con{
	border-top: 1px solid #ededed;
	width: 100%;
	bottom: 0;
	position: fixed;
	.footer-cantainer{
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		.footer-let{
			
			align-items: center;
			.qian{
				color:#FF0000 ;
				font-weight: bold;
				font-size: 30.47rpx;
			}
			display: flex;
			.footer-text{
				margin-left: 15px;
				display: flex;
				flex-direction: column;
				font-size: 21.09rpx;
				color: #9F9F9F;
				line-height: 20px;
			}
		}
	}
	.footer-btn{
		height:96.09rpx ;
		font-size: 28rpx;
		text-align: center;
		line-height:96.09rpx;
		width: 100%;
		display: flex;
		letter-spacing: 1px;
		.flex-con{
			background-color: #f7fffd;
			width: 50%;
			color: #191a1a;
			box-shadow: 0 1px 30px rgba(56, 206, 177, 0.2);
		}
		.flex-con2{
			background-color: #38ceb1;
			width: 50%;
			color: #fff;
		}
	}
}
.fsx-time{
	padding: 10px;
	padding-bottom: 80px;
}
.fxs-title{
		font-weight: bold;
		margin-top: 10px;
	}
.fxs-con{
	
	padding: 10px;
	
	.fxs-ul{
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
		.fxs-li{
			
			margin-bottom: 52rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 15px 15px 25px 15px ;
			align-items: center;
			width: 221rpx;
			background-color: #F5F5F5;
			position: relative;
			border-radius: 10px;
			color: #000;
			.textWz{
				margin-top: 10px;
			}
			.imgTx{
				width: 117.19rpx;
				height: 117.19rpx;
				border-radius: 50%;
			}
			.imgan{
				position: absolute;
				width: 63.28rpx;
				height: 63.28rpx;
				bottom: -15px;
				// background: url('#{$global-url-prefix}add2.png') no-repeat;
				background: url('/static/image/ico/add2.png') no-repeat;
				background-size: 63.28rpx 63.28rpx;
			}
		}
		
	}
}
.hover{
	border: 1px solid #38ceb1;
	background-color: #f6fffc !important;
	color: #38ceb1 !important;
}
.imghover{
	// background: url('#{$global-url-prefix}add.png') no-repeat !important;
	background: url('/static/image/ico/add.png') no-repeat !important;
	background-size: 63.28rpx 63.28rpx !important;
}
.banner-con{
	
	.image{
		width: 100%;
		height: 249.61rpx;
	}
	.text-block{
		display: block;
		color: #000;
		font-size:32.47rpx;
		margin-top: 9px;
		font-weight: bold;
	}
	.text-blocksize{
		color: #A7A7A7;
		font-size: 25.78rpx;
		margin-top: 5px;
	}
}
</style>
